<template>
  <div class="details" style="height:300px;">
      <el-image :src="albumDetail.imgurl" class="image">
      </el-image>
      <div class="det-right">
        <div class="album_name">
          <h1 class="album_name_txt">{{albumDetail.name}}</h1>
        </div>
        <div class="album_singer">
          <i class="el-icon-user" style="margin-right: 10px"></i>
          <span>{{ albumDetail.singer}} </span>
        </div>
        <div class="album_info">
          <span>语种: {{ albumDetail.language }} </span>
          <span>发行时间: {{ albumDetail.date }} </span>
        </div>
        <div class="album_info">
          <span> 唱片公司: {{ albumDetail.recordcompany }} </span>
          <span>类型: {{ albumDetail.type}} </span>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "AlbumDetailShow",
  props:["albumDetail"],
  components:{
  },
  data() {
    return {
    }
  },
  methods:{
  }

}
</script>

<style scoped>
.details .image{
  width: 250px;
  float: left;
}
.det-right{
  margin-left: 100px;
  float: left;
}
.details .album_name{
  overflow: hidden;
  height: 50px;
  line-height: 50px;
  margin-top: 15px;
}
.album_name_txt{
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 32px;
  font-weight: 400;
}
.album_singer{
  height: 24px;
  margin-bottom: 15px;
}
.album_singer span{
  font-size: 16px;
}
.album_info span{
  width:250px;
  text-align: left;
  display: inline-block;
  text-overflow: ellipsis;
  font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
  height: 27px;
}
</style>